<template>
  <div>
    <input
      v-model.trim="keyword"
      type="text"
      name="keyword"
      class="keyword"
      placeholder="Search by name"
    />
    <button @click="generateSearchData" type="button" class="searchBtn">搜索</button>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps<{
  initialKeyword: string;
  studentArr: any[]; // 使用具体的类型
}>();

const emit = defineEmits(['search']);

const keyword = ref(props.initialKeyword);

const generateSearchData = () => {
  const filteredStudents = props.studentArr.filter(student => student.name.includes(keyword.value));
  emit('search', filteredStudents);
};
</script>